<template>
  <div class="wrapper">
    <div class="header d-flex align-items-center justify-content-between">
      <div class="">
        <img width="70" height="70" style="border-radius: 50%" :src="wxUserInfo.headimgurl">
        <label class="ml-1 font18 vertical-m">{{wxUserInfo.nickname}}</label>
      </div>
      <label class="font16 " >版本号V1.0.0</label>
    </div>
    <div class="weui-cells mt-0">
      <div class="weui-cell justify-content-between" @click="getSysFun">
        <div>
          <i class="iconfont icon-screen txt_blue font20 vertical-m"></i>
          <label class="txt_gray">当前系统</label>
          <label class="ml-1">{{currentSys.label?currentSys.label:''}}</label>
        </div>
        <i class="iconfont icon-zhankai d-inline-block txt_gray" style="transform: rotate(-90deg)" ></i>
      </div>
      <div class="weui-cell justify-content-between"  @click="toPage">
        <div>
          <i class="iconfont icon-setting txt_blue font20 vertical-m"></i>
          <label class="txt_gray">系统配置</label>
        </div>
        <i class="iconfont icon-zhankai d-inline-block txt_gray" style="transform: rotate(-90deg)"></i>
      </div>
<!--      -->
      <div class="weui-cell justify-content-between" @click="updatephoneNo" v-if="tencentId==2">
        <div>
          <i class="iconfont icon-param txt_blue font20 vertical-m"></i>
          <label class="txt_gray">{{userPhoneNo==''?'绑定手机号':'已绑定号码'}}</label>
        </div>
        <i v-if="userPhoneNo!=''" class="iconfont icon-edit d-inline-block txt_blue font20"></i>
      </div>
    </div>
<!--    先绑定手机号-->
    <el-dialog v-if="tencentId==2" :visible.sync="showDialog" title="绑定手机号" width="80%" top="18vh" :show-close="false" :close-on-click-modal="false">
      <div class="re_cell d-flex  align-items-center">
        <label class="w80 mr-1">手机号</label>
        <el-input v-model="phoneNo"></el-input>
      </div>
      <el-button class="ur-btn ur-btn-primary w-100 mt-2" style="height: 40px"  @click="bindPhoneNo">
        <i class="iconfont icon-chenggong" style="margin-right: 6px;"></i>保存
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
  import common from "api/common";
  import {mapState} from 'vuex'
  import api from 'api/api'

  export default {
    components: {},
    props: {},
    data() {
      return {
        currentSys:{},
        showDialog:false,
        phoneNo:'',
        tencentId:sessionStorage.getItem('tencentId')||1
      }
    },
    watch: {
      async currentSys(v){
        if (!common.isEmpty(v)) {
          this.$store.commit('comm/setServerURL', window.global.webServerURL + ':' + v.value)
          let tencentId = sessionStorage.getItem('tencentId')
          if(tencentId==1){//照明一网统管
            let r = await api.fetchSimple('/User/Login_App', {userName: v.name, pwd: v.pwd})
            sessionStorage.setItem('webToken', r.token)
            api.fetchSimple('/User/BindOpenId', {Name: v.name, Pwd: v.pwd, OpenId: this.openid}).then(r => {})
          }else if(tencentId==2){//空开
            api.fetchSimple('/WeChat/BingOpenID', {phoneno: this.userPhoneNo, officialopenid: this.openid}).then(r => {})
          }
        }
      }
    },
    computed: {
      ...mapState({
        sysList:state=>state.comm.sysList,
        page_access_token:state=>state.user.page_access_token,
        openid:state=>state.user.openid,
        wxUserInfo:state=>state.user.wxUserInfo,
        currSys:state=>state.comm.currSys,
        userPhoneNo:state=>state.user.phoneNo||'',
      }),
    },
    methods: {
      updatephoneNo(){
        this.showDialog=true
      },
      bindPhoneNo(){
        var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (!reg_tel.test((this.phoneNo).trim())) {
          return this.$weui.topTips('请填写正确的手机号码！')
        } else {
          this.$store.commit('user/setPhoneNo', this.phoneNo)
          if (!common.isEmpty(this.currentSys)) {
            api.fetchSimple('/WeChat/BingOpenID', {phoneno: this.phoneNo, officialopenid: this.openid}).then(r => {})
          } else {
            this.$router.push('/static/systemList')//绑定系统
          }
          this.showDialog = false
        }
      },
      getUserInfo(){
        if(this.wxUserInfo.nickname) return
        api.fetchSimple('/GhPush/GetUserInfo',{token:this.page_access_token,openid:this.openid,lang:'zh_CN'}).then(r=>{
          console.log(r)
          this.$store.commit('user/setWxUserInfo',r)
        })
      },
      toPage(){
        this.$router.push('/static/systemList')
      },
      getSysFun(){
        let _this=this
        let sysList=this.sysList
        if(!sysList.length){
          return this.$weui.toast('未绑定系统')
        }
        this.$weui.picker(sysList, {
          defaultValue:[_this.currentSys.value],
          onConfirm: function (result) {
            _this.currentSys=result[0]
            _this.$store.commit('comm/setCurrSystem',JSON.stringify(result[0]))
          }
        })
      }
    },
    async created() {
      if (this.userPhoneNo == '') {
        this.showDialog = true
      }

      console.log(this.currSys)
      let currSys=(typeof this.currSys=='string')?JSON.parse(this.currSys):this.currSys
      if(Object.prototype.isPrototypeOf(currSys) && Object.keys(currSys).length != 0){
        this.currentSys=currSys
      }else{
        if(this.sysList.length){
          this.currentSys=this.sysList[0]
        }else{
          if(this.userPhoneNo != ''){
            this.$weui.toast('未绑定系统')
          }
        }
      }
      this.getUserInfo()
    },
    mounted() {}
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .header {
    height: 120px;
    padding: 15px 15px 15px 15px;
    background: #0c8eec;
    color: #fff;
  }
</style>
